<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

</head>

<body class="body-gray">

<div class="loginwrap">
    <div class="login-title setMeal-title">
        <a href="javascript: ;" id="cancel">取消</a>
    </div>

    <div class="setMeal-content">
        <!-- 套餐表格 -->
        <div class="fw_content_tablewrap">
            <div class="fw_content_table">
                <div class="fw_content_table_title" th:if="${error eq null}">
                    <ul class="clearfix">
                        <li class="li-one" style="padding-top: 0;">拍摄套餐包含服务表</li>
                        <li><img th:src="@{/static/m/img/icon/A.png}"></li>
                        <li><img th:src="@{/static/m/img/icon/B.png}"></li>
                        <li><img th:src="@{/static/m/img/icon/C.png}"></li>
                        <li><img th:src="@{/static/m/img/icon/D.png}"></li>
                    </ul>
                </div>

                <!-- 如果城市套餐为空, 仅显示城市选择 -->
                <div class="fw_content_table_city" th:if="${error ne null}">
                    <ul class="clearfix" th:if="${error ne null}">
                        <!--/* 拍摄地 */-->
                        <li class="city-list">
                            <select id="location-selector">
                                <option value="">请选择拍摄地</option>
                                <option th:each="item:${areas}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq city}"></option>
                            </select>
                        </li>
                        <li th:text="${error}"></li>
                    </ul>
                </div>

                <div class="fw_content_table_city" th:if="${error eq null}">
                    <ul class="clearfix">
                        <!--/* 拍摄地 */-->
                        <li class="city-list">
                            <select id="location-selector">
                                <option value="">请选择拍摄地</option>
                                <option th:each="item:${areas}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq city}"></option>
                            </select>
                        </li>

                        <!--/* 价格 */-->
                        <li class="cityName" th:each="item:${comboColumnList}" th:text="${'￥' + item.price}"></li>
                    </ul>
                </div>
                <div class="tab_conwrap" th:if="${error eq null}">
                    <div class="tab_con clearfix">

                        <table class="tab_con_left" cellspacing="0" cellpadding="0">
                            <tr th:each="item, index:${comboGroups}">
                                <th th:text="${item.groupName}"></th>
                                <td th:style="${index.index % 2 eq 0 ? '' : 'style=background: #fafafa;'}">
                                    <span th:each="tag, index:${item.tags}" th:text="${tag.tagName}"></span>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:100%; height: 70px; line-height: 70px;">选择套餐</th>
                            </tr>
                        </table>

                        <table class="tab_con_right" cellspacing="0" cellpadding="0">
                            <tr th:each="item, index:${comboColumnList[0].groups}">
                                <td>
                                    <span th:each="tag, tindex:${item.tags}" th:text="${tag.columnText == '' ? ' &nbsp;' : tag.columnText}"></span>
                                </td>
                                <td>
                                    <span th:each="tag, tindex:${comboColumnList[1].groups[index.index].tags}" th:text="${tag.columnText == '' ? ' &nbsp;' : tag.columnText}"></span>
                                </td>
                                <td>
                                    <span th:each="tag, tindex:${comboColumnList[2].groups[index.index].tags}" th:text="${tag.columnText == '' ? ' &nbsp;' : tag.columnText}"></span>
                                </td>
                                <td>
                                    <span th:each="tag, tindex:${comboColumnList[3].groups[index.index].tags}" th:text="${tag.columnText == '' ? ' &nbsp;' : tag.columnText}"></span>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 70px; line-height: 70px;" th:each="item:${comboColumnList}">
                                    <a class="selector-btn" href="javascript:void(0)" th:if="${item.value eq 1}" th:attr="data-combo-id=${item.id}, data-combo-label=${item.label}, data-combo-price=${item.price}">选择A套餐</a>
                                    <a class="selector-btn" href="javascript:void(0)" th:if="${item.value eq 2}" th:attr="data-combo-id=${item.id}, data-combo-label=${item.label}, data-combo-price=${item.price}">选择B套餐</a>
                                    <a class="selector-btn" href="javascript:void(0)" th:if="${item.value eq 3}" th:attr="data-combo-id=${item.id}, data-combo-label=${item.label}, data-combo-price=${item.price}">选择C套餐</a>
                                    <a class="selector-btn" href="javascript:void(0)" th:if="${item.value eq 4}" th:attr="data-combo-id=${item.id}, data-combo-label=${item.label}, data-combo-price=${item.price}">选择D套餐</a>
                                </td>
                            </tr>

                        </table>
                    </div>
                    <div class="beizhu">
                        <ul class="clearfix">
                            <li class="left-li">备注</li>
                            <li class="right-li">
                                <p>1、拍摄时长包含交通时间，超过拍摄时长（定制建议拍摄2天时间），需添加超时费；</p>
                                <p>2、超出拍摄范围拍摄需自付车费；</p>
                                <p>3、特效另加费用；</p>
                                <p>4、10s预告片可发朋友圈（拍摄后三天之内发送预告片，七天之内发送成品）</p>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script th:inline="javascript">
    $(function() {
        $('#cancel').click(function () {
            $('#combo-selector', parent.document).hide();
        })

        /**
         * 选定套餐
         */
        $('.selector-btn').click(function () {
            $('input[name="combo"]', parent.document).val($(this).attr('data-combo-id'));
            $('#combo-label', parent.document).text($(this).attr('data-combo-label'));
            $('.receipt-price', parent.document).text('￥' + $(this).attr('data-combo-price') + '元');
            $('.pay-price', parent.document).text('应付金额：￥' + $(this).attr('data-combo-price'));
            $('#combo-selector', parent.document).hide();
        })

        /**
         * 城市更改
         */
        $('#location-selector').change(function () {
            $('input[name="location"]').val(this.value);
            $('#location-select-btn', parent.document).text(this.selectedOptions[0].innerText);

            // 每次城市选择, 清空套餐关联数据
            $('input[name="combo"]', parent.document).val('');
            $('#combo-label', parent.document).text('点击选择套餐');
            $('.receipt-price', parent.document).text('￥0.00元');
            $('.pay-price', parent.document).text('应付金额：￥0.00');

            location.href = '/combo/selector?city=' + this.value;
        })
    })

</script>

</html>
